<template>
  <router-link :to="path" class="route">
    <i class="icon" > {{ iconText }}  </i>
 
        <p class="text">
            <slot></slot>
        </p>
  </router-link>
</template>

<script>

export default {
props:{
    iconText:String,
    path:String
}
}
</script>

<style lang="less" scope>
.route{
    font-size: .12rem;
}
.icon{
    display: flex;
    justify-content: center;
    align-items:center ;
    width: .25rem;
    height: .25rem;
    background: #ddd;
    color: #fff;
    border-radius: 50%;
    transition: all 0.5s;
}
.text{
    text-align: center;
    margin-top: .02rem;
    color: #999;
    transition: all 0.5s;
}
&.router-link-active {
    .icon{
        background: #ed4040;
        color: #fff;
    }
    .text{
        color:#ed4040;
    }
}
</style>